<template>
  <div class="trade-view">
    <div class="trade-header">
      <div class="view-title">
        <h1 class="title">
          <span class="title-icon">💰</span>
          贸易中心
        </h1>
        <p class="subtitle">管理贸易路线和商业活动</p>
      </div>
      
      <div class="trade-controls">
        <div class="trade-balance">
          <span class="balance-icon">💎</span>
          <span class="balance-value">{{ formatNumber(tradeBalance) }}</span>
          <span class="balance-label">贸易余额</span>
        </div>
        
        <div class="view-filters">
          <select v-model="selectedTradeType" class="filter-select">
            <option value="all">所有贸易</option>
            <option value="import">进口</option>
            <option value="export">出口</option>
            <option value="internal">内部贸易</option>
          </select>
          
          <select v-model="selectedStatus" class="filter-select">
            <option value="all">所有状态</option>
            <option value="active">活跃</option>
            <option value="pending">待处理</option>
            <option value="suspended">暂停</option>
          </select>
        </div>
        
        <button @click="createTradeRoute" class="create-route-btn">
          <span class="btn-icon">➕</span>
          创建贸易路线
        </button>
      </div>
    </div>
    
    <div class="trade-content">
      <!-- 贸易概览 -->
      <div class="trade-overview">
        <div class="overview-stats">
          <div class="stat-card">
            <div class="stat-icon">🚚</div>
            <div class="stat-info">
              <div class="stat-value">{{ activeRoutes }}</div>
              <div class="stat-label">活跃路线</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon">📈</div>
            <div class="stat-info">
              <div class="stat-value">{{ formatNumber(dailyRevenue) }}</div>
              <div class="stat-label">日收入</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon">🏪</div>
            <div class="stat-info">
              <div class="stat-value">{{ tradingPosts }}</div>
              <div class="stat-label">贸易站</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon">🤝</div>
            <div class="stat-info">
              <div class="stat-value">{{ tradePartners }}</div>
              <div class="stat-label">贸易伙伴</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 贸易路线 -->
      <div class="trade-routes-section">
        <div class="section-header">
          <h2 class="section-title">贸易路线</h2>
          <div class="section-actions">
            <button @click="toggleRouteView" class="view-toggle-btn">
              <span class="btn-icon">{{ routeViewMode === 'grid' ? '📋' : '⊞' }}</span>
              {{ routeViewMode === 'grid' ? '列表视图' : '网格视图' }}
            </button>
          </div>
        </div>
        
        <div class="routes-container" :class="routeViewMode">
          <div 
            v-for="route in filteredRoutes" 
            :key="route.id"
            class="route-card"
            :class="[`status-${route.status}`, { selected: selectedRoute?.id === route.id }]"
            @click="selectRoute(route)"
          >
            <div class="route-header">
              <div class="route-info">
                <h3 class="route-name">{{ route.name }}</h3>
                <div class="route-path">
                  <span class="origin">{{ route.origin }}</span>
                  <span class="arrow">→</span>
                  <span class="destination">{{ route.destination }}</span>
                </div>
              </div>
              
              <div class="route-status">
                <div class="status-indicator" :class="`status-${route.status}`">
                  {{ getStatusIcon(route.status) }}
                </div>
                <span class="status-text">{{ getStatusName(route.status) }}</span>
              </div>
            </div>
            
            <div class="route-goods">
              <div class="goods-list">
                <div 
                  v-for="good in route.goods" 
                  :key="good.type"
                  class="good-item"
                >
                  <span class="good-icon">{{ getGoodIcon(good.type) }}</span>
                  <span class="good-name">{{ getGoodName(good.type) }}</span>
                  <span class="good-quantity">{{ formatNumber(good.quantity) }}</span>
                </div>
              </div>
            </div>
            
            <div class="route-stats">
              <div class="stat-row">
                <div class="stat-item">
                  <span class="stat-icon">💰</span>
                  <span class="stat-text">{{ formatNumber(route.revenue) }}/天</span>
                </div>
                <div class="stat-item">
                  <span class="stat-icon">⏱️</span>
                  <span class="stat-text">{{ route.duration }}天</span>
                </div>
                <div class="stat-item">
                  <span class="stat-icon">🚢</span>
                  <span class="stat-text">{{ route.shipsAssigned }}</span>
                </div>
              </div>
              
              <div class="profit-margin">
                <span class="margin-label">利润率:</span>
                <span class="margin-value" :class="{ positive: route.profitMargin > 0, negative: route.profitMargin < 0 }">
                  {{ route.profitMargin > 0 ? '+' : '' }}{{ route.profitMargin.toFixed(1) }}%
                </span>
              </div>
            </div>
            
            <div class="route-actions">
              <button @click.stop="manageRoute(route)" class="action-btn primary">
                <span class="btn-icon">⚙️</span>
                管理
              </button>
              <button @click.stop="pauseRoute(route)" class="action-btn" :disabled="route.status === 'suspended'">
                <span class="btn-icon">⏸️</span>
                {{ route.status === 'suspended' ? '已暂停' : '暂停' }}
              </button>
              <button @click.stop="viewRouteDetails(route)" class="action-btn">
                <span class="btn-icon">📊</span>
                详情
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 市场价格 -->
      <div class="market-section">
        <div class="section-header">
          <h2 class="section-title">市场价格</h2>
          <div class="section-actions">
            <button @click="refreshPrices" class="refresh-btn">
              <span class="btn-icon">🔄</span>
              刷新价格
            </button>
          </div>
        </div>
        
        <div class="market-grid">
          <div 
            v-for="market in markets" 
            :key="market.id"
            class="market-card"
          >
            <div class="market-header">
              <div class="market-info">
                <h3 class="market-name">{{ market.name }}</h3>
                <div class="market-location">{{ market.location }}</div>
              </div>
              <div class="market-status">
                <span class="status-indicator" :class="`status-${market.status}`">
                  {{ getMarketStatusIcon(market.status) }}
                </span>
              </div>
            </div>
            
            <div class="market-prices">
              <div class="prices-header">
                <span class="price-label">商品</span>
                <span class="price-label">买入</span>
                <span class="price-label">卖出</span>
                <span class="price-label">趋势</span>
              </div>
              
              <div class="prices-list">
                <div 
                  v-for="price in market.prices" 
                  :key="price.good"
                  class="price-item"
                >
                  <div class="price-good">
                    <span class="good-icon">{{ getGoodIcon(price.good) }}</span>
                    <span class="good-name">{{ getGoodName(price.good) }}</span>
                  </div>
                  <div class="price-buy">{{ formatNumber(price.buyPrice) }}</div>
                  <div class="price-sell">{{ formatNumber(price.sellPrice) }}</div>
                  <div class="price-trend" :class="price.trend">
                    {{ getTrendIcon(price.trend) }}
                  </div>
                </div>
              </div>
            </div>
            
            <div class="market-actions">
              <button @click="viewMarketDetails(market)" class="action-btn">
                <span class="btn-icon">📈</span>
                查看详情
              </button>
              <button @click="createRouteToMarket(market)" class="action-btn primary">
                <span class="btn-icon">🚚</span>
                创建路线
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 贸易协议 -->
      <div class="agreements-section">
        <div class="section-header">
          <h2 class="section-title">贸易协议</h2>
          <button @click="negotiateAgreement" class="negotiate-btn">
            <span class="btn-icon">🤝</span>
            谈判协议
          </button>
        </div>
        
        <div class="agreements-list">
          <div 
            v-for="agreement in tradeAgreements" 
            :key="agreement.id"
            class="agreement-card"
            :class="`status-${agreement.status}`"
          >
            <div class="agreement-header">
              <div class="agreement-info">
                <h3 class="agreement-name">{{ agreement.name }}</h3>
                <div class="agreement-partner">与 {{ agreement.partner }} 的协议</div>
              </div>
              
              <div class="agreement-status">
                <span class="status-badge" :class="`status-${agreement.status}`">
                  {{ getAgreementStatusName(agreement.status) }}
                </span>
              </div>
            </div>
            
            <div class="agreement-terms">
              <div class="terms-grid">
                <div class="term-item">
                  <span class="term-label">贸易量折扣:</span>
                  <span class="term-value">{{ agreement.volumeDiscount }}%</span>
                </div>
                <div class="term-item">
                  <span class="term-label">关税减免:</span>
                  <span class="term-value">{{ agreement.tariffReduction }}%</span>
                </div>
                <div class="term-item">
                  <span class="term-label">优先商品:</span>
                  <span class="term-value">{{ agreement.priorityGoods.join(', ') }}</span>
                </div>
                <div class="term-item">
                  <span class="term-label">有效期:</span>
                  <span class="term-value">{{ agreement.duration }}天</span>
                </div>
              </div>
            </div>
            
            <div class="agreement-benefits">
              <div class="benefit-item">
                <span class="benefit-icon">💰</span>
                <span class="benefit-text">月收益: +{{ formatNumber(agreement.monthlyBenefit) }}</span>
              </div>
              <div class="benefit-item">
                <span class="benefit-icon">📈</span>
                <span class="benefit-text">贸易效率: +{{ agreement.efficiencyBonus }}%</span>
              </div>
            </div>
            
            <div class="agreement-actions">
              <button @click="renewAgreement(agreement)" class="action-btn" :disabled="agreement.status !== 'active'">
                <span class="btn-icon">🔄</span>
                续约
              </button>
              <button @click="modifyAgreement(agreement)" class="action-btn">
                <span class="btn-icon">✏️</span>
                修改
              </button>
              <button @click="terminateAgreement(agreement)" class="action-btn danger">
                <span class="btn-icon">❌</span>
                终止
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 路线详情面板 -->
    <div v-if="selectedRoute" class="route-details-panel">
      <div class="panel-header">
        <div class="panel-title-section">
          <div class="panel-icon">🚚</div>
          <div class="panel-title-info">
            <h2 class="panel-title">{{ selectedRoute.name }}</h2>
            <div class="panel-subtitle">{{ selectedRoute.origin }} → {{ selectedRoute.destination }}</div>
          </div>
        </div>
        <button @click="closeRouteDetails" class="close-btn">✕</button>
      </div>
      
      <div class="panel-content">
        <div class="route-overview">
          <div class="overview-item">
            <span class="overview-label">状态:</span>
            <span class="overview-value">{{ getStatusName(selectedRoute.status) }}</span>
          </div>
          <div class="overview-item">
            <span class="overview-label">距离:</span>
            <span class="overview-value">{{ selectedRoute.distance }} 光年</span>
          </div>
          <div class="overview-item">
            <span class="overview-label">运输时间:</span>
            <span class="overview-value">{{ selectedRoute.duration }} 天</span>
          </div>
        </div>
        
        <div class="route-performance">
          <h4 class="performance-title">路线表现</h4>
          <div class="performance-stats">
            <div class="performance-item">
              <span class="performance-icon">💰</span>
              <div class="performance-info">
                <div class="performance-name">日收益</div>
                <div class="performance-value">{{ formatNumber(selectedRoute.revenue) }}</div>
              </div>
            </div>
            <div class="performance-item">
              <span class="performance-icon">📊</span>
              <div class="performance-info">
                <div class="performance-name">利润率</div>
                <div class="performance-value" :class="{ positive: selectedRoute.profitMargin > 0 }">
                  {{ selectedRoute.profitMargin.toFixed(1) }}%
                </div>
              </div>
            </div>
            <div class="performance-item">
              <span class="performance-icon">🚢</span>
              <div class="performance-info">
                <div class="performance-name">分配舰船</div>
                <div class="performance-value">{{ selectedRoute.shipsAssigned }}</div>
              </div>
            </div>
            <div class="performance-item">
              <span class="performance-icon">📦</span>
              <div class="performance-info">
                <div class="performance-name">货物容量</div>
                <div class="performance-value">{{ formatNumber(selectedRoute.cargoCapacity) }}</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="route-cargo">
          <h4 class="cargo-title">货物清单</h4>
          <div class="cargo-list">
            <div 
              v-for="good in selectedRoute.goods" 
              :key="good.type"
              class="cargo-item"
            >
              <div class="cargo-icon">{{ getGoodIcon(good.type) }}</div>
              <div class="cargo-info">
                <div class="cargo-name">{{ getGoodName(good.type) }}</div>
                <div class="cargo-quantity">数量: {{ formatNumber(good.quantity) }}</div>
              </div>
              <div class="cargo-value">
                <div class="cargo-price">{{ formatNumber(good.unitPrice) }}/单位</div>
                <div class="cargo-total">总值: {{ formatNumber(good.quantity * good.unitPrice) }}</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="route-history">
          <h4 class="history-title">交易历史</h4>
          <div class="history-list">
            <div 
              v-for="record in selectedRoute.history" 
              :key="record.id"
              class="history-item"
            >
              <div class="history-date">{{ formatDate(record.date) }}</div>
              <div class="history-action">{{ record.action }}</div>
              <div class="history-amount" :class="{ positive: record.amount > 0, negative: record.amount < 0 }">
                {{ record.amount > 0 ? '+' : '' }}{{ formatNumber(record.amount) }}
              </div>
            </div>
          </div>
        </div>
        
        <div class="route-controls">
          <h4 class="controls-title">路线控制</h4>
          <div class="controls-grid">
            <button @click="optimizeRoute" class="control-btn optimize">
              <span class="btn-icon">⚡</span>
              优化路线
            </button>
            <button @click="addShips" class="control-btn add">
              <span class="btn-icon">➕</span>
              增加舰船
            </button>
            <button @click="changeGoods" class="control-btn modify">
              <span class="btn-icon">📦</span>
              修改货物
            </button>
            <button @click="suspendRoute" class="control-btn suspend">
              <span class="btn-icon">⏸️</span>
              暂停路线
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Good {
  type: string
  quantity: number
  unitPrice: number
}

interface TradeRoute {
  id: string
  name: string
  origin: string
  destination: string
  status: 'active' | 'pending' | 'suspended'
  distance: number
  duration: number
  revenue: number
  profitMargin: number
  shipsAssigned: number
  cargoCapacity: number
  goods: Good[]
  history: TradeRecord[]
}

interface TradeRecord {
  id: string
  date: string
  action: string
  amount: number
}

interface MarketPrice {
  good: string
  buyPrice: number
  sellPrice: number
  trend: 'up' | 'down' | 'stable'
}

interface Market {
  id: string
  name: string
  location: string
  status: 'open' | 'closed' | 'restricted'
  prices: MarketPrice[]
}

interface TradeAgreement {
  id: string
  name: string
  partner: string
  status: 'active' | 'pending' | 'expired'
  volumeDiscount: number
  tariffReduction: number
  priorityGoods: string[]
  duration: number
  monthlyBenefit: number
  efficiencyBonus: number
}

// 响应式数据
const selectedTradeType = ref('all')
const selectedStatus = ref('all')
const selectedRoute = ref<TradeRoute | null>(null)
const routeViewMode = ref<'grid' | 'list'>('grid')

// 模拟数据
const tradeBalance = ref(2450000)
const dailyRevenue = ref(85000)

const tradeRoutes = ref<TradeRoute[]>([
  {
    id: '1',
    name: '地球-火星贸易线',
    origin: '地球',
    destination: '火星',
    status: 'active',
    distance: 0.5,
    duration: 3,
    revenue: 15000,
    profitMargin: 23.5,
    shipsAssigned: 4,
    cargoCapacity: 50000,
    goods: [
      { type: 'food', quantity: 20000, unitPrice: 2.5 },
      { type: 'minerals', quantity: 15000, unitPrice: 8.0 }
    ],
    history: [
      { id: '1', date: '2024-01-15', action: '货物交付', amount: 15000 },
      { id: '2', date: '2024-01-12', action: '货物装载', amount: -8000 }
    ]
  },
  {
    id: '2',
    name: '半人马座贸易路线',
    origin: '太阳系',
    destination: '半人马座α',
    status: 'active',
    distance: 4.3,
    duration: 15,
    revenue: 45000,
    profitMargin: 35.2,
    shipsAssigned: 8,
    cargoCapacity: 120000,
    goods: [
      { type: 'technology', quantity: 5000, unitPrice: 50.0 },
      { type: 'rare_metals', quantity: 8000, unitPrice: 25.0 }
    ],
    history: [
      { id: '3', date: '2024-01-14', action: '货物交付', amount: 45000 },
      { id: '4', date: '2024-01-10', action: '路线优化', amount: 0 }
    ]
  }
])

const markets = ref<Market[]>([
  {
    id: '1',
    name: '地球中央市场',
    location: '地球',
    status: 'open',
    prices: [
      { good: 'food', buyPrice: 2.2, sellPrice: 2.8, trend: 'up' },
      { good: 'minerals', buyPrice: 7.5, sellPrice: 8.5, trend: 'stable' },
      { good: 'energy', buyPrice: 12.0, sellPrice: 14.0, trend: 'down' }
    ]
  },
  {
    id: '2',
    name: '火星工业区',
    location: '火星',
    status: 'open',
    prices: [
      { good: 'food', buyPrice: 3.0, sellPrice: 3.5, trend: 'up' },
      { good: 'minerals', buyPrice: 6.8, sellPrice: 7.8, trend: 'up' },
      { good: 'technology', buyPrice: 45.0, sellPrice: 55.0, trend: 'stable' }
    ]
  }
])

const tradeAgreements = ref<TradeAgreement[]>([
  {
    id: '1',
    name: '地球-火星贸易协定',
    partner: '火星联邦',
    status: 'active',
    volumeDiscount: 15,
    tariffReduction: 25,
    priorityGoods: ['食物', '矿物'],
    duration: 365,
    monthlyBenefit: 125000,
    efficiencyBonus: 20
  },
  {
    id: '2',
    name: '外星系贸易联盟',
    partner: '半人马座联盟',
    status: 'pending',
    volumeDiscount: 20,
    tariffReduction: 30,
    priorityGoods: ['技术', '稀有金属'],
    duration: 730,
    monthlyBenefit: 280000,
    efficiencyBonus: 35
  }
])

// 计算属性
const activeRoutes = computed(() => tradeRoutes.value.filter(route => route.status === 'active').length)
const tradingPosts = computed(() => markets.value.length)
const tradePartners = computed(() => tradeAgreements.value.length)

const filteredRoutes = computed(() => {
  return tradeRoutes.value.filter(route => {
    const typeMatch = selectedTradeType.value === 'all' || 
      (selectedTradeType.value === 'import' && route.goods.some(g => g.type === 'food')) ||
      (selectedTradeType.value === 'export' && route.goods.some(g => g.type === 'technology')) ||
      selectedTradeType.value === 'internal'
    const statusMatch = selectedStatus.value === 'all' || route.status === selectedStatus.value
    return typeMatch && statusMatch
  })
})

// 方法
function formatNumber(num: number): string {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

function formatDate(dateStr: string): string {
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN')
}

function getStatusName(status: string): string {
  const names = {
    active: '活跃',
    pending: '待处理',
    suspended: '暂停'
  }
  return names[status as keyof typeof names] || status
}

function getStatusIcon(status: string): string {
  const icons = {
    active: '✅',
    pending: '⏳',
    suspended: '⏸️'
  }
  return icons[status as keyof typeof icons] || '❓'
}

function getMarketStatusIcon(status: string): string {
  const icons = {
    open: '🟢',
    closed: '🔴',
    restricted: '🟡'
  }
  return icons[status as keyof typeof icons] || '❓'
}

function getGoodIcon(type: string): string {
  const icons = {
    food: '🍎',
    minerals: '⛏️',
    energy: '⚡',
    technology: '💻',
    rare_metals: '💎',
    weapons: '⚔️'
  }
  return icons[type as keyof typeof icons] || '📦'
}

function getGoodName(type: string): string {
  const names = {
    food: '食物',
    minerals: '矿物',
    energy: '能源',
    technology: '技术',
    rare_metals: '稀有金属',
    weapons: '武器'
  }
  return names[type as keyof typeof names] || type
}

function getTrendIcon(trend: string): string {
  const icons = {
    up: '📈',
    down: '📉',
    stable: '➡️'
  }
  return icons[trend as keyof typeof icons] || '➡️'
}

function getAgreementStatusName(status: string): string {
  const names = {
    active: '生效中',
    pending: '待批准',
    expired: '已过期'
  }
  return names[status as keyof typeof names] || status
}

function selectRoute(route: TradeRoute) {
  selectedRoute.value = route
}

function closeRouteDetails() {
  selectedRoute.value = null
}

function toggleRouteView() {
  routeViewMode.value = routeViewMode.value === 'grid' ? 'list' : 'grid'
}

function createTradeRoute() {
  console.log('创建贸易路线')
}

function manageRoute(route: TradeRoute) {
  console.log('管理路线:', route.name)
}

function pauseRoute(route: TradeRoute) {
  console.log('暂停路线:', route.name)
}

function viewRouteDetails(route: TradeRoute) {
  selectRoute(route)
}

function refreshPrices() {
  console.log('刷新市场价格')
}

function viewMarketDetails(market: Market) {
  console.log('查看市场详情:', market.name)
}

function createRouteToMarket(market: Market) {
  console.log('创建到市场的路线:', market.name)
}

function negotiateAgreement() {
  console.log('谈判新协议')
}

function renewAgreement(agreement: TradeAgreement) {
  console.log('续约协议:', agreement.name)
}

function modifyAgreement(agreement: TradeAgreement) {
  console.log('修改协议:', agreement.name)
}

function terminateAgreement(agreement: TradeAgreement) {
  console.log('终止协议:', agreement.name)
}

function optimizeRoute() {
  console.log('优化路线')
}

function addShips() {
  console.log('增加舰船')
}

function changeGoods() {
  console.log('修改货物')
}

function suspendRoute() {
  console.log('暂停路线')
}
</script>

<style scoped>
.trade-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.trade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.view-title {
  display: flex;
  flex-direction: column;
}

.title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.title-icon {
  font-size: 1.5rem;
}

.subtitle {
  margin: 0.25rem 0 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.trade-controls {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.trade-balance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.balance-icon {
  font-size: 1.2rem;
}

.balance-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--success-color);
}

.balance-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.view-filters {
  display: flex;
  gap: 0.75rem;
}

.filter-select {
  padding: 0.5rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
}

.create-route-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-route-btn:hover {
  background: var(--primary-hover);
}

.trade-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.trade-overview {
  margin-bottom: 1rem;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.stat-icon {
  font-size: 2rem;
  opacity: 0.8;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.25rem;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.trade-routes-section,
.market-section,
.agreements-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.section-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.section-actions {
  display: flex;
  gap: 0.75rem;
}

.view-toggle-btn,
.refresh-btn,
.negotiate-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-toggle-btn:hover,
.refresh-btn:hover,
.negotiate-btn:hover {
  background: var(--bg-hover);
}

.negotiate-btn {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.negotiate-btn:hover {
  background: var(--primary-hover);
}

.routes-container {
  display: grid;
  gap: 1.5rem;
}

.routes-container.grid {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.routes-container.list {
  grid-template-columns: 1fr;
}

.route-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.route-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.route-card.selected {
  border-color: var(--primary-color);
  background: var(--bg-hover);
}

.route-card.status-active {
  border-left: 4px solid var(--success-color);
}

.route-card.status-pending {
  border-left: 4px solid var(--warning-color);
}

.route-card.status-suspended {
  border-left: 4px solid var(--text-secondary);
}

.route-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.route-info {
  flex: 1;
}

.route-name {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.route-path {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.arrow {
  color: var(--primary-color);
  font-weight: bold;
}

.route-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.status-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.status-indicator.status-active {
  background: rgba(34, 197, 94, 0.2);
}

.status-indicator.status-pending {
  background: rgba(245, 158, 11, 0.2);
}

.status-indicator.status-suspended {
  background: rgba(107, 114, 128, 0.2);
}

.status-text {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.route-goods {
  margin-bottom: 1rem;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.good-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 0.9rem;
}

.good-icon {
  font-size: 1.2rem;
}

.good-name {
  color: var(--text-primary);
}

.good-quantity {
  color: var(--text-secondary);
  font-weight: 600;
}

.route-stats {
  margin-bottom: 1rem;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.stat-icon {
  font-size: 1rem;
}

.stat-text {
  color: var(--text-primary);
  font-weight: 500;
}

.profit-margin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 0.9rem;
}

.margin-label {
  color: var(--text-secondary);
}

.margin-value.positive {
  color: var(--success-color);
  font-weight: 600;
}

.margin-value.negative {
  color: var(--error-color);
  font-weight: 600;
}

.route-actions {
  display: flex;
  gap: 0.75rem;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.action-btn:hover {
  background: var(--bg-hover);
}

.action-btn.primary {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.action-btn.primary:hover {
  background: var(--primary-hover);
}

.action-btn.danger {
  background: var(--error-color);
  color: white;
  border-color: var(--error-color);
}

.action-btn.danger:hover {
  background: var(--error-hover);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-icon {
  font-size: 1rem;
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.5rem;
}

.market-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
}

.market-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.market-info {
  flex: 1;
}

.market-name {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.market-location {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.market-status .status-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.market-prices {
  margin-bottom: 1.5rem;
}

.prices-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.75rem;
}

.price-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.prices-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.price-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.9rem;
}

.price-good {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.price-buy,
.price-sell {
  color: var(--text-primary);
  font-weight: 500;
}

.price-trend {
  display: flex;
  justify-content: center;
}

.price-trend.up {
  color: var(--success-color);
}

.price-trend.down {
  color: var(--error-color);
}

.price-trend.stable {
  color: var(--text-secondary);
}

.market-actions {
  display: flex;
  gap: 0.75rem;
}

.agreements-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.agreement-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
}

.agreement-card.status-active {
  border-left: 4px solid var(--success-color);
}

.agreement-card.status-pending {
  border-left: 4px solid var(--warning-color);
}

.agreement-card.status-expired {
  border-left: 4px solid var(--error-color);
}

.agreement-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.agreement-info {
  flex: 1;
}

.agreement-name {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.agreement-partner {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.agreement-status .status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-badge.status-active {
  background: var(--success-color);
  color: white;
}

.status-badge.status-pending {
  background: var(--warning-color);
  color: white;
}

.status-badge.status-expired {
  background: var(--error-color);
  color: white;
}

.agreement-terms {
  margin-bottom: 1rem;
}

.terms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}

.term-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 0.9rem;
}

.term-label {
  color: var(--text-secondary);
}

.term-value {
  color: var(--text-primary);
  font-weight: 600;
}

.agreement-benefits {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 0.9rem;
}

.benefit-icon {
  font-size: 1.2rem;
}

.benefit-text {
  color: var(--text-primary);
  font-weight: 500;
}

.agreement-actions {
  display: flex;
  gap: 0.75rem;
}

.route-details-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.panel-title-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.panel-icon {
  font-size: 2rem;
}

.panel-title-info {
  flex: 1;
}

.panel-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.panel-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: var(--bg-hover);
  color: var(--error-color);
}

.panel-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.route-overview {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.overview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: var(--bg-primary);
  border-radius: 6px;
}

.overview-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.overview-value {
  color: var(--text-primary);
  font-weight: 500;
}

.route-performance {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.performance-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.performance-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.performance-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-primary);
  border-radius: 6px;
}

.performance-icon {
  font-size: 1.5rem;
}

.performance-info {
  flex: 1;
}

.performance-name {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.performance-value {
  font-weight: 600;
  color: var(--text-primary);
}

.performance-value.positive {
  color: var(--success-color);
}

.route-cargo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cargo-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.cargo-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cargo-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-primary);
  border-radius: 6px;
}

.cargo-icon {
  font-size: 1.5rem;
}

.cargo-info {
  flex: 1;
}

.cargo-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.cargo-quantity {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.cargo-value {
  text-align: right;
}

.cargo-price {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.cargo-total {
  font-weight: 600;
  color: var(--text-primary);
}

.route-history {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.history-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--bg-primary);
  border-radius: 6px;
  font-size: 0.9rem;
}

.history-date {
  color: var(--text-secondary);
}

.history-action {
  flex: 1;
  text-align: center;
  color: var(--text-primary);
}

.history-amount.positive {
  color: var(--success-color);
  font-weight: 600;
}

.history-amount.negative {
  color: var(--error-color);
  font-weight: 600;
}

.route-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.controls-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
}

.control-btn.optimize {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.control-btn.add {
  background: var(--success-color);
  color: white;
  border-color: var(--success-color);
}

.control-btn.modify {
  background: var(--warning-color);
  color: white;
  border-color: var(--warning-color);
}

.control-btn.suspend {
  background: var(--text-secondary);
  color: white;
  border-color: var(--text-secondary);
}

.control-btn:hover {
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .trade-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .trade-controls {
    flex-direction: column;
    gap: 1rem;
  }
  
  .routes-container.grid {
    grid-template-columns: 1fr;
  }
  
  .market-grid {
    grid-template-columns: 1fr;
  }
  
  .route-details-panel {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
}
</style>